<script >
import { getCategoryData } from "@/api/categorydata";
export default {
    name: "CategoryCard",
    data() {
        return {
            radio: "品类",
            data1: [],
            data2: [],
            categoryData: {
                title: [{
                    text: '品类分布',
                    top:'10px',
                    left: '10px',
                    textStyle: {
                        fontSize: 14,
                        color: '#666'
                    }},{
                    top:'44%',
                    left: '41%',
                    textAlign: 'center',    
                    subtext: '{a|累计订单量}\n{b|000}',
                    subtextStyle: {
                        align: 'center',
                        rich: {
                            a: {
                                fontSize: 20,
                                color: '#333',
                                
                            },
                            b: {
                                fontSize: 30,
                                fontWeight: 600,
                                color: '#333',


                            }
                        },
                    }
                }],
                tooltip: {//提示框
                    trigger: 'item',
                    //formatter: '{a}<br/>{b}<br/>销售额: {c}  '
                    //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,
                    //模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
                    formatter: function (params) {
                        // params 是一个包含当前数据信息的对象数组  
                        // 例如：params[0].name（类别名称），params[0].value（数据值），params[0].seriesName（系列名称）等  
                        // 这里你可以根据实际需求拼接 HTML 字符串 
                        //const span='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params.color+'"></span>'
                        return params.seriesName + 
                        '<br/>' + params.marker + params.name +'<br/>'+params.marker+'销售额:'+ params.value 
                    },
                   
                },
                legend: {
                    left: '80%',
                    orient: 'vertical',// 图例的排列方式，默认是水平排列，可选为：'horizontal' |'vertical'
                    textStyle: {
                        fontSize: 12,
                        color: '#666'
                    }
                },
                series: [
                    {
                        name: '品类分布',
                        type: 'pie',
                        radius: ['55%', '70%'],
                        avoidLabelOverlap: false,// 避免标签重叠
                        padAngle: 4,// 扇形之间的间距
                        itemStyle: {
                            borderRadius: 5// 扇形的圆角
                        },
                        labelLine: {
                            show: true//
                        },
                        data: [],
                        left: '10px',
                        top: '10px',
                        width: '80%%'
                    }
                ]
            }
        }
    },
    mounted() {
        getCategoryData().then(res => {
            this.data1 = res.data.data1;
            this.data2 = res.data.data2;
            this.handleRadioChange(this.radio);
        })
    },
    methods:{
        handleRadioChange: function (val) {
            let data=this.data1;
            if (val === "品类") {
                data=this.data1;
            } else {
                data=this.data2;
            }
            this.categoryData.series[0].data = data.map(item => {
                return {
                    name: item.title,
                    value: item.value,
                }
            })
            this.categoryData.legend.formatter=function(name){
                return name+'|'+data.find(item=>item.title===name).value
            }
            this.categoryData.title[1].subtext='{a|累计订单量}\n{b|'+data.reduce((pre, cur) => pre + cur.value, 0)+'}'
        }
    },
    watch: {
        radio(val) {
            this.handleRadioChange(val);
        }
    }
}


</script>
<template>
    <div>
        <el-card style="margin-left: 10px;margin-right: 10px;">
            <div slot="header" class="header">
                <div class="title">分类销售排行</div>
                <div class="nav">
                    <el-radio-group v-model="radio">
                        <el-radio-button label="品类"></el-radio-button>
                        <el-radio-button label="商品"></el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="content">
                <v-chart :option="categoryData" :style="{ height: '480px', width: '100%' }"></v-chart>
            </div>
        </el-card>
    </div>
</template> 
<style scoped>
.header {
    position: relative;
}

.nav {
    position: absolute;
    top: -67%;
    right: 2%;

}

.title {
    font-weight: 600;
}
</style>